html,body, #container{
    min-height: 100.5%;
}

a{
    color:rgba( 255, 255, 255, .8 );
}

#main{
    margin-top: 0;
    padding: 0;
}

#main .manage-panel{
    position: relative;
    padding:10px 0;
    display: none;
}

#home.manage-panel{
    padding: 60px 0 0 0;
}

#home header{
    position: fixed;
    padding-left:10px;
    top:0;
    z-index: 0;
    width:100%;
    background: rgba( 0, 0, 0, .4 );
    line-height: 50px;
    border:1px solid rgba( 255, 255, 255, .2 );
    box-shadow: 0 2px 2px rgba( 0, 0, 0, .3 );
}

#home .view{
    padding-left:15px;
    line-height: 1.5em;
    min-height: 300px;
}

#home .view span.welcome{
    font-size:50px;
    font-family: "微软雅黑";
    font-weight: bold;
    line-height: 300px;
    display: block;
    text-align: center;
    text-shadow:1px 3px 3px rgba( 0, 0, 0, .4 );
}

#home>header>.button{
    padding: 0;
    display: inline-block;
    line-height: 30px;
    padding: 0 10px;
}

#home>header>a{
    text-decoration: none;
}

button.button{
    outline:none;
}

#info{
}


#info .navbar{
}
#info .navbar>.btn-list{
    padding-left:20px;
}

#info .navbar>.btn-list li{
    float: left;
    line-height: 25px;
    background: rgba( 255, 255, 255, .1 );
    padding: 0 10px;
    margin-right:5px;
    border:1px solid #2a2a2a;
    border-bottom:none;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
    color:rgba( 255, 255, 255, .8 );
}

#info .navbar>.btn-list li:hover{
    background: rgba( 255, 0, 0, .4 );
}

#info .navbar>.btn-list li.action{
    background: rgba( 0, 0, 0, .4 );
}


#info .table-warp{
    background: rgba( 0, 0, 0, .4 );
    border-radius: 5px;
    box-shadow: 1px 2px 2px rgba( 0, 0, 0, .2 );
    padding: 10px 5px;
    min-height: 100px;
    position: relative;
    padding-bottom:45px;
}

#info .table-warp>div{
    display: none;
}

#info .table-warp .tip{
    display: block;
    line-height: 24px;
}


#info .table-warp table{
    border-top:1px solid rgba( 255, 255, 255, .1 );
}


#info .table-warp table tr td:first-child{
    padding-left:5px;
}

#info .table-warp table tr td{
    line-height: 30px;
    overflow: hidden;
    border-top:1px solid rgba( 0, 0, 0, .2 );
    border-bottom:1px solid rgba( 255, 255, 255, .1 );
}

#info .table-warp table td input{
    vertical-align: middle;
}

#info .table-warp table td a{
    color:rgba( 0, 255, 255, .4 );
}

#info .table-warp table td.visit{
    color:rgba( 255, 255, 255, .6 );
}

#info .table-warp table td.date{
    color:rgba( 255, 255, 255, .3 );
}

#info .table-warp table tr td:last-child{
    position: relative;
}

#info .table-warp table tr{
    cursor: pointer;
    background: rgba( 255, 255, 255, .1 );
}

#info .table-warp table tr:hover{
    background: rgba( 255, 255, 255, .2 );
}
#info .table-warp table button.remove{
    right:5px;
    top:7px;
}
#info .table-warp table tr:hover button.remove{
    display: block;
}

#info .table-warp footer{
    padding-top:5px;
    width:100%;
    position: absolute;
    left:5px;
    bottom:10px;
}

#category-list{
    width:20%;
    float: left;
    box-shadow: -3px 3px 3px rgba( 0, 0, 0, .3 );
}

#category-list header,
#annex-list header{
    padding: 10px 0 10px 15px;
    font-size:120%;
    font-weight: bold;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;

}

#category-list ul,
#annex-list ul{
    display: block;
    overflow: hidden;
    border-top:1px solid rgba( 255, 255, 255, .2 );
}

#category-list li,
#annex-list li{
    position: relative;
    display: block;
    overflow: hidden;
    padding-left:10px;
    height: 30px;
    line-height: 30px;
    border-left:5px solid rgba( 255, 255, 255, .2 );
    border-bottom:1px solid rgba( 255, 255, 255, .2 );
    background: rgba( 255, 255, 255, .1 );
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.amd-btn{
    border: none;
    display: block;
    position: absolute;
    height:16px;
    width:16px;
    top:7px;
    right: 0px;
    background: url("../../images/16_icons/btn.png") 0 0 no-repeat;
    cursor: pointer;
    opacity: .3;
    display: none;
    outline: none;
}


.amd-btn:hover{
    opacity: 1;
}

.add[class*=amd-btn]{
    opacity: .5;
    display: block;
    right:5px;
    background-position: 0 -16px;
}
.remove[class*=amd-btn]{
    right: 5px;
    background-position: 0 -32px;
}


.down[class*=amd-btn]{
    right: 5px;
    background-position: 0 -48px;
}

.upload[class*=amd-btn]{
    right: 5px;
    background-position: 0 -64px;
}


.modify[class*=amd-btn]{
    right : 25px;
}


#category-list li:hover{
    background:rgba( 255, 255, 255, .2 );
}

#category-list li:hover button{
    display: block;
}

#category-list li.selected{
    background: rgba( 0, 0, 0, .4 )
}

#category-list li span.count{
    font-size:85%;
    color:rgba( 255, 255, 255, .5 );
}

#post-list .search-box{
    padding: 10px;
}

#post-list .search-box input[type=text]{
    padding: 5px 10px;
    width:80%;
    height: 30px;
    border-radius: 3px 0px 0px 3px;
    border:none;
    vertical-align: middle;
    background: rgba( 255, 255, 255, .7 );
}

#post-list .search-box .button{
    width:20%;
    max-width: 80px;
    padding: 5px;
    height: 30px;
    vertical-align:middle;
    border-radius:0 3px 3px 0px;
}

#post-list .search-box .search-info{
    display: block;
    padding-top:10px;
    color:rgba( 255, 255, 255, .8 );
    font-weight: bold;
}

#post-list{
    width:80%;
    float: right;
    background: rgba( 0, 0, 0, .4 );
    border-radius: 10px 10px 5px 5px;
    padding-bottom:50px;
    position: relative;
    min-height: 200px;
}


#post-list table th{
    padding: 5px 0;
    text-align: center;
    height:25px;
    background: rgba( 255, 0, 0, .3 );
    color:rgba( 255, 255, 255, .8 );
}

#post-list table td,
#post-list table th{
    border-right:1px solid rgba( 255, 255, 255, .2 );
}
#post-list table th:last-child,
#post-list table td:last-child{
    border-right:none;
}

#post-list table td:last-child{
    position: relative;
}
#post-list table tr:hover{
    background: rgba( 0, 0, 0, .2 );
}

#post-list table tr:hover td:last-child button{
    display: block;
}

#post-list table td{
    padding: 6px 0;
    text-align: center;
    border-bottom: 1px solid rgba( 255, 255, 255, .2 );
    white-space: nowrap;
}

#post-list table td.number{
    color:rgba( 0, 255, 255, .5 );
}

#post-list table td.title,
#post-list table td.adate{
    text-align: left;
    padding-left:10px;
}

.small-w-scren #post-list .optional{
    display: none;
}


#post-list footer{
    overflow: hidden;
    background:rgba( 0, 0, 0, .4 );
    position:absolute;
    width:100%;
    left:0px;
    bottom:0px;
    border-radius: 0px 0px 5px 5px;
    padding: 5px 0px 5px 0px;
}


#post-list footer button:first-child{
    margin-left:10px;
}

#post-list footer button.post,
#post-editor button.post{
    background: rgba( 255, 50, 0, .5 );
}


#post .editor{
    display: none;
    margin-top: 10px;
    padding-top:10px;
    border-top:1px dashed rgba( 255, 255, 255, .3 );
}

#annex-list{
    float:left;
    width:20%;
}

#annex-list header{
    position: relative;
    height: 25px;
    overflow: hidden;
}

.file-btn{
    cursor: pointer;
    display:inline-block;
    font-size: 13px;
}

.file-btn .uploader{
    display: none;
}


#annex-list ul{
    border:none;
    margin-left:5px;
}

#annex-list li{
    border:none;
    height: 34px;
    line-height: 34px;
    padding-left:34px;
    border-bottom:1px solid rgba( 0, 0, 0, .5 );
    position: relative;
    overflow: visible;
    background: url("../../images/32_icons/file_exts.png") 0 0 no-repeat rgba( 0, 0, 0, .3 );
}

#annex-list li[ext*=jpg],
#annex-list li[ext*=png],
#annex-list li[ext*=gif],
#annex-list li[ext*=bmp]{
    background-position: 0 -256px;
}

#annex-list li[ext*=zip],
#annex-list li[ext*=rar],
#annex-list li[ext*=iso]{
    background-position: 0 -96px;
}

#annex-list li[ext*=css],
#annex-list li[ext*=js]{
    background-position: 0 -64px;
}


#annex-list li[ext*=html],
#annex-list li[ext*=xml]{
    background-position: 0 -32px;
}


#annex-list li[ext*=pdf]{
    background-position: 0 -128px;
}

#annex-list li[ext*=doc]{
    background-position: 0 -160px;
}

#annex-list li[ext*=xls]{
    background-position: 0 -224px;
}

#annex-list li[ext*=ppt]{
    background-position: 0 -192px;
}

.small-w-scren #annex-list li{
    background-position: 0 32px;
    padding-left:5px;
}

#annex-list li:hover{
    background-color: rgba( 0, 0, 0, .1 );
}

#annex-list button.amd-btn{
    top:10px;
}

#annex-list li:hover button{
    display: block;
}

#post-editor{
    float: right;
    width:80%;
    padding: 10px 0;
}

#post-editor input[type=text],
#post-editor textarea,
#post-editor select{
    display: block;
    margin-left:5px;
    margin-bottom:10px;
    border-radius: 3px;
    width:90%;
    color:rgba( 255, 255, 255, .8 );
    background: rgba( 0, 0, 0, .5 );
    border:1px solid rgba( 255, 255, 255, .3 );
}


#post-editor input[type=text]{    
    padding: 5px 5px 5px 10px;
}

#post-editor select{
    padding: 5px;
    max-width: 300px;
}

#post-editor input[name=title]{
    font-size:16px;
    font-weight: bold;
}

#post-editor input[name=tags],
#post-editor input[name=originlink],
#post-editor input[name=linkname]{
    max-width: 600px;
}

#post-editor textarea{
    max-width: 920px;
    resize:auto;
    background: rgba( 0, 0, 0, .5 );
    border:1px solid rgba( 255, 255, 255, .3 );
    min-height: 400px;
    padding: 5px;
    color:rgba( 255, 255, 255, .8 );
    font-size: 16px;
    font-family: "Consolas", "Courier New";
    line-height: 1.3;
    word-break:break-all;
}

#post-editor div.line{
    margin-left:5px;
}

#post-editor button{
    background: rgba( 0, 0, 0, .2 );
}

#main #friend{
    margin-top:20px;
    background: rgba( 0, 0, 0, .4 );
    border-radius: 5px;
    padding: 0px;
    overflow: hidden;
    min-height: 100px;
    padding-bottom: 50px;
}
#friend table{
    margin: 0px;
}
#friend table th{
    background: rgba( 255, 0, 0, .3 );
    line-height: 30px;
    border-right:1px solid rgba( 255, 255, 255, .2 );
}
#friend table td{
    text-align: center;
    line-height: 30px;
    border-right:1px solid rgba( 255, 255, 255, .2 );
    border-bottom:1px solid rgba( 255, 255, 255, .2 );
}
#friend table td a{
    color:rgba( 0, 255, 255, .4 );
}
#friend table th:last-child,
#friend table td:last-child{
    border-right:none;
    position: relative;
}
#friend table tr{
    background: rgba( 0, 0, 0, .1 );
}
#friend table tr:hover{
    background: rgba( 255, 255, 255, .05 );
}
#friend table tr button{
    position: static;
    display: inline-block;
}

#friend footer{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    line-height: 40px;
    padding-left:10px;
    background: rgba( 0, 0, 0, .2 );
}


#friend footer button{
    display: inline-block;
    opacity: 1;
}

#friend footer button.add{
    background: rgba( 255, 50, 0, .5 );
}

#main #about{
    margin-top:10px;
    background: rgba( 0, 0, 0, .4 );
    border-radius: 5px;
    min-height: 100px;
    overflow: hidden;
    padding: 10px 15px 10px 15px;
    margin-top:50px;
}

#about section.item{
    float: left;
    line-height: 30px;
    padding: 0 10px;
    margin: 0px 10px 10px 0;
    min-width:100px;
    max-width: 100px;
    border-radius: 3px;
    border:1px solid rgba( 255, 255, 255, .2 ); 
    background: rgba( 0, 0, 0, .4 );
    box-shadow: 1px 1px 2px 2px rgba( 0, 0, 0, .4 );
    position: relative;
    cursor: pointer;
}

#about section.newyear{
    float: none;
    clear:both;
    background: rgba( 255, 0, 0, .4 );
}

#about section.item:hover{
    box-shadow: 0 1px 1px rgba( 255, 255, 255, .1 );
}
#about section.item:hover .amd-btn{
    display: block;
}

#about section.item button.remove{
    right:5px;
}

#about section.item a.down{
    right: 23px;
}

#about>header{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    background: #1a1a1a;
    z-index: 2;
    padding: 5px 10px;
    border-bottom: 1px solid rgba( 255, 255, 255, .3 );
    box-shadow: 0 2px 2px rgba( 0, 0, 0, .1 );
}
#about>header button{
    display: inline-block;
    opacity: 1;
}


#about>header button.add{
    background: rgba( 255, 50, 0, .5 );
}

#sidebar a.exit .icon{
    background: url("../../images/24_icons/nav-btn.png") 0 -48px no-repeat;
}

#sidebar li.manage .icon{
    background-position-y:-176px;
}


#sidebar li.blog .icon{
    background-position-y:-160px;
}
#sidebar li.contact{
    position: relative;;
}
#sidebar li.contact span.tip{
    display: none;
}
#sidebar li.contact[new] span.tip{
    display: block;
    position: absolute;
    top:10px;
    right:6px;
    width:6px;
    height:6px;
    border-radius: 10px;
    border:1px solid rgba( 0, 0, 0, .4 );
    background:rgba( 255, 0, 0, .8 );
    box-shadow: 1px 2px 2px rgba( 0, 0, 0, .3 );
}

#dialog{
    position: fixed;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    display: none;
    z-index: 1000000;
}

#dialog .dialog-mask{
    position: absolute;
    width:100%;
    height: 100%;
    z-index: 0;
    background:rgba( 0, 0, 0, .5 );
    display: none;
    opacity: 0;
}

#dialog .dialog-window{
    min-width:200px;
    min-height:50px;
    background: #222;
    position: absolute;
    border-radius: 8px;
    border:1px solid rgba( 255, 255, 255, .3 );
    box-shadow: 1px 1px 3px 3px rgba( 255, 255, 255, .1 );
    display: none;
    overflow: hidden;
    left:50%;
    top:50%;
}



#dialog .dialog-window:hover{
    border:1px solid rgba( 255, 255, 255, .6 );
}

#dialog .dialog-window>div.panel{
    padding: 10px;
    overflow: hidden;
}

#dialog .dialog-window>header.top-bar{
    height: 30px;
    line-height: 30px;
    padding-left:10px;
    background: rgba( 0, 0, 0, .4 );
    white-space: nowrap;;
}

#dialog .dialog-window>header.top-bar button.amd-btn{
    display: block;
}

#message-container{
    position: relative;
    height: 100%;
    padding-bottom: 40px;
}

#message-container span.tip{
    display: block;
    padding: 5px 0px 5px 5px;
    font-size:110%;
    color:rgba( 255, 255, 255, .6 );
}

#message-container input[type=text]{
    display: none;
    padding: 5px;
    border:none;
    border-radius: 3px;
    min-width:200px;
}

#message-container .button-bar{
    position: absolute;
    width:100%;
    bottom:0px;
    left: 0px;
    height: 32px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}


#message-container button.cancel{
    display: none;
}

#message-container[class*=confirm] button.cancel,
#message-container[class*=prompt] button.cancel{
    display: inline-block;
}
#message-container[class*=prompt] input[type=text]{
    display: block;
}

#message-container[class*=wait] div.button-bar{
    display: none;
}

#message-container[class*=wait]{
    padding-bottom:0;
}

#message-container[class*=wait] span.tip{
    padding: 10px 5px;
    text-align: center;
}


#message-view span{
    display: block;
    line-height: 30px;
    margin-top:5px;
}

#message-view span,
#message-view textarea{
    background: rgba( 0, 0, 0, .3 );
    border-radius: 5px;
    padding-left:10px;
    display: block;
}


#message-view textarea{
    padding: 5px 0px 5px 10px;
    width:500px;
    height:300px;
    border:none;
    margin-top:10px;
    color: rgba( 255, 255, 255, .8 );
}

#reply-input{
    position: relative;
}


#reply-input span.post{
    line-height: 30px;
}

#reply-input span.post a{
    color:rgba( 0, 255, 255, .4 );
}

#reply-input span.tip{
    line-height: 32px;
    display: block;
}

#reply-input div.comment-view{
    padding: 5px;
    background: rgba( 0, 0, 0, .2 );
    border-radius: 5px;
    width:400px;
    min-height: 20px;
    max-height: 150px;
    overflow: auto;
     word-wrap: break-word; 
     word-break: normal; 
}

#reply-input textarea{
    border:none;
    display: block;
    color:rgba( 255, 255, 255, .8 );
    background: rgba( 0, 0, 0, .4 );
    padding: 5px;
    border-radius: 5px;
    width:400px;
    height:80px;
    margin: 5px 0px 5px 0px;
}

#reply-input footer{
    text-align: center;
}

#reply-input span.tip a{
    color:rgba( 0, 255, 255, .4 );
}


#friend-editor,
#history-input{
    position: relative;
}

#friend-editor input,
#friend-editor textarea,
#history-input input{
    padding: 5px;
    border-radius: 5px;
    background: rgba( 0, 0, 0, .4 );
    margin: 0;
    margin-bottom:5px;
    width:300px;
    display: block;
    border:none;
    color: rgba( 255, 255, 255, .8 );
}
#friend-editor textarea{
    height:100px;
    width:290px;
}

#friend-editor span.adate{
    line-height: 30px;
    color:rgba( 255, 255, 255, .6 );
}

#friend-editor footer,
#history-input footer{
    text-align: center;
}


#history-input .content{
    display: block;
    position: relative;
    line-height: 30px;
    background: rgba( 0, 0, 0, .4 );
    padding-left:5px;
    border-radius: 5px;
    cursor: pointer;
}

#history-input .content:hover .amd-btn{
    display: block;
}

#history-input .content .modify{
    right:10px;
}

#history-input .content .uploader{
    display: none;
}


#history-input>footer{
    margin-top:5px;
}

#tip{
    position: fixed;
    left:10px;
    top:0px;
    display: none;
    z-index: 10000;
}

#tip .tip-box{
    display: none;
    opacity: 0;
    position: relative;
    padding: 5px 10px;
    border:1px solid #999;
    border-radius: 5px;
    min-width: 100px;
    max-width: 300px;
    color:white;
    font-weight: bold;
    margin-top:12px;
    box-shadow: 1px 3px 3px rgba( 0, 0, 0, .5 );
}


#tip .tip-box:before{
    content: "";
    position: absolute;
    top:-6px;
    left:15px;
    width:10px;
    height:10px; 
    display: block;
    border:1px solid #999;
    border-bottom: none;
    border-right:none;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

#tip .error{
    background: rgb( 180, 0, 0 );
}

#tip .error:before{
    background: rgb( 180, 0, 0 );
}

#tip .info{
    background: rgb( 0, 100, 180 );
}
#tip .info:before{
    background: rgb( 0, 100, 180 );
}

#tip .warning{
    background: rgb( 230, 100, 0 );
}
#tip .warning:before{
    background: rgb( 230, 100, 0 );
}
